import { messages, queryCurrencyPrecision } from "share/common";
import React, { Component, PropTypes } from 'react'
import { Popover, Tag } from "antd";
import Condition from "components/condition";
const { If } = Condition;
import constants from "share/constants";
import CorporatePaymentReportDetailRelative from './corporate-payment-report-detail-relative'

class CorporatePaymentReportDetailHeader extends Component {

  static contextTypes = {
    info: PropTypes.object,
    isWaitForAudit: PropTypes.bool
  };

  render() {
    const { info } = this.context;
    let currencyPrecision = queryCurrencyPrecision(info.currencyCode);
    return (
      <div className='corporate-payment-report-detail-header'>
        <div className='corporate-payment-report-detail-header-form'>
          <div className='corporate-payment-report-detail-header-form-title'>{info.formName}</div>
          {constants.documentStatus.map(item => {
            if(
              (item.value === String(info.status) && info.rejectType === 1000) ||
              item.value === String(info.status * 10000 + info.rejectType)
            ) {
              return <Tag
                color={item.color}
                className='corporate-payment-report-detail-header-form-status'
              >
                {item.text}
              </Tag>
            }
          })}
        </div>
        <If value={info.nodeName}>
          <div className="corporate-payment-report-detail-header-nodeName">
            <Popover content={info.nodeName} placement="topLeft">{info.nodeName}</Popover>
          </div>
        </If>
        <div className={`corporate-payment-report-detail-header-amount ${!info.realPaymentAmount ? 'font-disabled' : ''}`}>
          {info.currencyCode}&nbsp;
          {this.filterMoney(info.realPaymentAmount, currencyPrecision)}
          <span className='corporate-payment-report-detail-header-amount-label'>{messages('finance-9.key5')/*支付金额*/}</span>
        </div>
        <div className={`corporate-payment-report-detail-header-amount ${!info.totalAmount ? 'font-disabled' : ''}`}>
          {info.currencyCode}&nbsp;
          {this.filterMoney(info.totalAmount, currencyPrecision)}
          <span className='corporate-payment-report-detail-header-amount-label'>{messages('finance-9.key4')/*到票金额*/}</span>
        </div>
        <CorporatePaymentReportDetailRelative/>
        <div className='corporate-payment-info-row default-color-font'>
          <If value={info.deliveryCode}>
            {messages('finance-9.key21')/*快递单号*/}：{info.deliveryCode} >
          </If>
        </div>
      </div>
    )
  }

}

export default CorporatePaymentReportDetailHeader;
